<template>
    <div class="home-page">
        <!-- 订单数，销售额等 -->
        <el-space wrap>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="box-card" shadow="hover"
                        style="background: linear-gradient(-67.6938deg, rgb(111, 134, 214) 0%, rgb(72, 198, 239) 100%)">
                        <span>今日订单数</span>
                        <p>1640</p>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="box-card"
                        style="background: linear-gradient(-67.6938deg, rgb(255, 123, 87) 0%, rgb(245, 205, 16) 100%);">
                        <span>今日销售额</span>
                        <p>64380</p>
                        <div class="box"></div>
                    </el-card>
                </el-col>
                <el-col :span="6">

                    <el-card class="box-card"
                        style="background: linear-gradient(-67.6938deg, rgb(95, 114, 189) 0%, rgb(163, 63, 228) 100%)">
                        <span>昨日销售额</span>
                        <p>24680</p>
                    </el-card>
                </el-col>
                <el-col :span="6">

                    <el-card class="box-card"
                        style="background: linear-gradient(-67.6938deg, rgb(40, 140, 191) 0%, rgb(81, 210, 195) 100%);">
                        <span>近7日销售总额</span>
                        <p>546730</p>
                    </el-card>
                </el-col>
            </el-row>
        </el-space>

        <el-space wrap style="display: flex;justify-content: space-between;margin: 8px 0px;">
            <el-row :gutter="20">
                <el-col :span="12">
                    <!-- 课程总览 -->
                    <el-card class="box-card" style="width: 605px;height: 141px;">
                        <template #header>
                            <div class="card-header">
                                <span>课程总览</span>
                            </div>
                        </template>
                        <ul>
                            <div class="card-data" v-for="item in 4">
                                <p style="font-size: 35px;color: #1485fe;margin-bottom: 4px;">140</p>
                                <span style="font-size: 12px;color: black;">已上架</span>
                            </div>
                        </ul>
                    </el-card>
                </el-col>
                <el-col :span="12">

                    <!-- 用户总览 -->
                    <el-card class="box-card" style="width: 605px;height: 141px;">
                        <template #header>
                            <div class="card-header">
                                <span>用户总览</span>
                            </div>
                        </template>
                        <ul>
                            <div class="card-data" v-for="item in 4">
                                <p style="font-size: 35px;color: #1485fe;margin-bottom: 4px;">140</p>
                                <span style="font-size: 12px;color: black;">已上架</span>
                            </div>
                        </ul>
                    </el-card>
                </el-col>
            </el-row>
        </el-space>

        <el-space wrap style="display: flex;justify-content: space-between">
            <el-row :gutter="30">
                <el-col :span="17">
                    <!-- 待处理事务 -->
                    <el-card class="box-card" style="width: 860px;height:240px;">
                        <template #header>
                            <div class="card-header">
                                <span>待处理事务</span>
                            </div>
                        </template>
                        <div class="headerList">
                            <div class="pending" v-for="item in 3">
                                <li class="list" v-for="item in 3">
                                    <p>未开课课程</p>
                                    <p>8</p>
                                </li>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <!-- 运营快捷入口 -->
                    <el-card class="box-card" style="width: 330px;height: 240px;">
                        <template #header>
                            <div class="card-header">
                                <span>运营快捷入口</span>
                            </div>
                        </template>
                        <div class="entrance">
                            <li>
                                <span class="iconfont icon-add" style="font-size:22px;color:#3a98fd"></span>
                                <span>添加课程</span>
                            </li>
                            <li>
                                <span class="iconfont icon-round_menu_fill" style="font-size:22px;color:#f5c926"></span>
                                <span>订单列表</span>
                            </li>
                            <li>
                                <span class="iconfont icon-user1" style="font-size:22px;color:#3ecdb7"></span>
                                <span>学生管理</span>
                            </li>
                            <li>
                                <span class="iconfont icon-userrect " style="font-size:22px;color:#47b8f3"></span>
                                <span>教师管理</span>
                            </li>
                            <li>
                                <span class="iconfont icon-icon-file" style="font-size:22px;color:#3ecdb7"></span>
                                <span>课程管理</span>
                            </li>
                            <li>
                                <span class="iconfont icon-money" style="font-size:22px;color:#f57b50"></span>
                                <span>收入管理</span>
                            </li>
                            <li>
                                <span class="iconfont icon-chanpinfenlei" style="font-size:22px;color:#1485fe"></span>
                                <span>分类管理</span>
                            </li>

                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-space>

        <!-- 统计图 -->
        <el-space direction="vertical" style="margin-top: 10px;">
            <!-- 订单统计 -->
            <!-- <MyChart :option="order"  />    -->
            <!-- 销售统计 -->
            <MyChart :option="sell" />
            <MyChart :option="order" />
        </el-space>

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { reactive } from "vue"


import MyChart from "./myChart.vue"

const order = reactive(
    {
        title: {
            text: '近一周订单统计'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 932, 901, 934, 190, 1030, 120],
                type: 'line',
                smooth: true,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgb(210, 226, 253)',
                            // color:'rgb(252, 233, 209)',
                        },
                        {
                            offset: 1,
                            color: 'rgb(251, 252, 255)',
                            // color:'rgb(255, 253, 250)',
                        }
                    ])
                }
            }
        ]
    })

const sell = reactive(
    {
        title: {
            text: '近一周销售统计',
            left: 40,
            textStyle: {
                fontWeight: 'normal',
                fontSize: '14'
            },
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // show:true,
            // show:false,
        },
        yAxis: {
            type: 'value',
            // show:true,
            // position:'left',

            // show:false,
        },
        series: [
            {
                data: [820, 932, 901, 934, 190, 1030, 120],
                type: 'line',
                smooth: true,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            // color: 'rgb(210, 226, 253)',
                            color: 'rgb(252, 233, 209)',
                        },
                        {
                            offset: 1,
                            // color: 'rgb(251, 252, 255)',
                            color: 'rgb(255, 253, 250)',
                        }
                    ])
                }
            }
        ]
    })

</script>

<style scoped>
.headerList {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.card-header {
    color: black;
    font-size: 12px;
}

.home-page {
    /* padding: 20px; */
    background-color: #f8f8f8;
    min-height: 600px;
    height: 100%;
}

.text {
    font-size: 14px;
}

.pending {
    width: 126px;
    display: flex;
    flex-direction: column;
}

.list {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: black;
    border-bottom: 1px solid #f6f6f6;
    cursor: pointer
}

.list :hover,
p :hover {
    color: #1485fe;
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.list p {
    font-size: 13px !important;
    margin: 10px 0 !important;
}

.item {
    padding: 18px 0;

}

.box-card {
    width: 290px;
    height: 102px;
    border-radius: 8.5px;
    color: white;
    font-size: 15px;
}

.box-card p {
    font-size: 26px;
    margin: 18px 0px;
}

.card-data {
    color: black;
    position: relative;
    top: -20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: 0;
}

:deep(.el-divider--horizontal) {
    margin: 0;
}

:deep(.el-divider--vertical) {
    height: 120px;
}

.entrance {
    margin: 10px auto;
    height: 140px;
    display: flex;
    /* justify-content: space-evenly; */
    align-items: flex-start;
    flex-wrap: wrap;
}

.entrance li {
    flex-shrink: 0;
    width: 50px;
    height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: black;
    margin-right: 13px;
    vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;

}
.entrance li :hover{
    cursor: pointer;

}

.entrance li span {
    margin-top: 6px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}


</style>